<template>
    <div class="fly-panel fly-signin">
      <div class="fly-panel-title">
        签到
        <i class="fly-mid"></i>
        <a href="javascript:;" class="fly-link" id="LAY_signinHelp" @click="isShow = true;">说明</a>
        <i class="fly-mid"></i>
        <a href="javascript:;" class="fly-link" id="LAY_signinTop" @click="showRank = true;">活跃榜<span class="layui-badge-dot"></span></a>
        <span class="fly-signin-days" v-show="isSign || isLogin">已连续签到<cite>{{count}}</cite>天</span>
      </div>
      <div class="fly-panel-main fly-signin-main">
        <template v-if="!isSign">
          <button class="layui-btn layui-btn-danger" id="LAY_signin" @click="sign">今日签到</button>
          <span>可获得<cite>{{favs}}</cite>飞吻</span>
        </template>
        <!-- 已签到状态 -->
        <template v-else>
          <button class="layui-btn layui-btn-disabled">今日已签到</button>
          <span>获得了<cite>{{favs}}</cite>飞吻</span>
        </template>
      </div>
      <SignInfo :isShow="isShow" @closeModal="close"></SignInfo>
      <SignRank :isShow="showRank" @closeModal="close"></SignRank>
  </div>
</template>
<script>
import SignInfo from './SignInfo.vue';
import SignRank from './SignRank.vue';
import { getSign } from '@/api/user';
import { mapState } from 'vuex';
import moment from 'moment';

export default {
  name: 'Sign',
  components: {
    SignInfo,
    SignRank
  },
  data () {
    return {
      isShow: false,
      showRank: false,
      isSign: this.$store.state.userInfo !== {} ? this.$store.state.userInfo.isSign : false
    };
  },
  methods: {
    close () {
      this.isShow = false;
      this.showRank = false;
    },
    sign () {
      if (!this.isLogin) {
        this.$pop('shake', '请先登录！');
      } else {
        getSign().then(res => {
          const user = this.$store.state.userInfo;
          if (res.code === 200) {
            user.count = res.count;
            user.favs = res.favs;
            this.$store.commit('setUserInfo', user);
            localStorage.setItem('userInfo', JSON.stringify(user));
          } else {
            this.$pop('shake', res.msg);
          }
          user.isSign = true;
          user.lastSign = res.lastSign;
          this.isSign = true;
          this.$store.commit('setUserInfo', user);
          localStorage.setItem('userInfo', JSON.stringify(user));
        });
      }
    }
  },
  computed: {
    ...mapState(['isLogin']),
    count () {
      if (this.$store.state.userInfo !== {}) {
        if (typeof this.$store.state.userInfo.count !== 'undefined') {
          return this.$store.state.userInfo.count;
        } else {
          return 0;
        }
      } else {
        return 0;
      }
    },
    favs () {
      let favs = 0;
      const count = parseInt(this.count);
      if (count < 5) {
        favs = 5;
      } else if (count >= 5 && count < 15) {
        favs = 10;
      } else if (count >= 15 && count < 30) {
        favs = 15;
      } else if (count >= 30 && count < 100) {
        favs = 20;
      } else if (count >= 100 && count < 365) {
        favs = 30;
      } else if (count >= 365) {
        favs = 50;
      }
      return favs;
    }
    // isSign () {
    //   return this.$store.state.userInfo !== {} ? this.$store.state.userInfo.isSign : false;
    // }
  },
  mounted () {
    // 判断用户的上一次签到时间与签到状态
    // 如果用户上次签到时间于当天签到时间不相同，则允许用户签到
    const isSign = this.$store.state.userInfo !== {} ? this.$store.state.userInfo.isSign : false;
    const lastSign = this.$store.state.userInfo !== {} ? this.$store.state.userInfo.lastSign : null;
    const nowDate = moment().format('YYYY-MM-DD');
    const lastDate = moment(lastSign).format('YYYY-MM-DD');
    const diff = moment(nowDate).diff(moment(lastDate), 'day');

    if (diff > 0 && isSign) {
      this.isSign = false;
    } else {
      this.isSign = isSign;
    }
  }
};
</script>
<style lang="scss">
@keyframes bounceIn {
  0% {
    opacity: 0;
    transform:  scale(0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.fly-panel {
  margin-bottom: 0;
}

.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 10000;
}

.info {
  width: 300px;
  height: 440px;
  top: 50%;
  left: 50%;
  margin-top: -220px;
  margin-left: -150px;
  background-color: #fff;
  z-index: 10001;

  &.active {
    animation-fill-mode: both;
    animation-duration: 0.4s;
    animation-name: bounceIn;
  }

  .layui-layer-title {
    height: 42px;
    line-height: 42px;
    padding: 0 20px;
    color: #333;
    background-color: #f8f8f8;
  }

  .layui-layer-content {
    padding: 20px;
  }

  .layui-icon-close {
    cursor: pointer;
  }

  .orange {
    margin-top: 10px;
  }

  .layui-tab-item {
    display: block;
    line-height: 45px;

    li {
      text-align: left;
      border-bottom: 1px dotted #dcdcdc;
      &:last-child {
        border-bottom: none;
      }
    }
    img {
      width: 30px;
      height: 30px;
      border-radius: 2px;
    }
  }
  .rankInfo {
    padding: 0 10px;
  }
}
</style>
